<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>监听示例</title>
  </head>
  <body>
    我叫张三，我是云南的，云南怒江的。今年<span id="ageElem"></span>岁
    <script>
      let data = {
        age: 2,
        aaa:[]
      };


  

      
      ageElem.innerText = 18; // 先给ageElem 赋值，

      observer(data); // 对data 数据进行监听，监听后所有引用data数据的地方都能感应到

      setTimeout(() => { // 对data 数据更改，页面上的信息会自动跟着变化。这就是响应式原理。
        // data.age = 30;
        data.aaa.push(1)
      }, 2000);

      function render() { // 这是个假的模版渲染，仅在这里用于演示。
        ageElem.innerText = data.age;
        console.log('1111')
      }

      function defineReactive(target, key, value) { // 对传入对象的每一个key进行监听。
        Object.defineProperty(target, key, {
          get() {
            return value;
          },
          set(newVal) {
            if (newVal !== value) {
              value = newVal;
              render(); // 进行赋值时，重新渲染模版
            }
          },
        });
      }

      function observer(target) {
        if (typeof target !== "object" || target === null) {
          return target;
        }

        for (let key in target) {
          defineReactive(target, key, target[key]);
        }
      }

     
    </script>
  </body>
</html>
